---
title: List with handler
description: A guide to use Fluid DnD to adding a drag handler to a list.
---

import SingleListWithHandler from "@/components/svelte/SingleListWithHandler.svelte";
import { Code } from "@astrojs/starlight/components";

### List of number example

With **Fluid DnD** you dont have to drag the elements across its entire surface, just pass a **handler selector** to `handlerSelector` property that will be used to find the handler element as following:

export const listOfNumbers = `<script setup lang="ts">
import { useDragAndDrop } from "fluid-dnd/vue";
import Handler from "./icons/handler.vue";

const list = $state([1, 2, 3, 4, 5]);
const handlerSelector = ".handler";
const [ parent ] = useDragAndDrop(list, { handlerSelector });

</script>`;

<Code code={listOfNumbers} lang="svelte" />

### Creating the view

After, we'll create the `template` and add the class `handler` to the `Handler` component:

export const listOfNumbersDraggable = `
<ul use:parent class="number-list">
  {#each list as element, index}
    <li class="number" data-index={index}>
      <Handler class="handler" />
      { element }
    </li>
  {/each}
</ul>`;

export const highlightsDraggable = ["handler"];

<Code code={listOfNumbersDraggable} lang="svelte" mark={highlightsDraggable} />

### Preview

<div class="pl-8">
  <SingleListWithHandler client:load />
</div>
